<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2024 Cshoo Org. All Rights Reserved.
  ~
  ~ author:杨翼
  ~ date: 2024年4月28日
  ~ description:album组件html片段,负责组件UI展示
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->

<div class="album" data-sly-use.album="album.js">
    <div class="hidden">
        <input id="offsetStep" type="hidden" value="${properties.offsetStep}">
        <input id="baseOffset" type="hidden" value="${properties.baseOffset}">
        <input id="scaleStep" type="hidden" value="${properties.scaleStep}">
        <input id="opacityStep" type="hidden" value="${properties.opacityStep}">
        <input id="rotateX" type="hidden" value="${properties.rotateX}">
        <input id="rotateY" type="hidden" value="${properties.rotateY}">
    </div>
    <div class="carousel">
        <div class="arrow prev"></div>
        <div class="carousel-list">
            <sly data-sly-list.item="${album.images}">
                <img class="carousel-item" src="${item.valueMap.path}" alt="${item.valueMap.name}"/>
            </sly>
        </div>
        <div class="arrow next"></div>
    </div>
</div>

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.all @ categories='album.album'}"></sly>
</sly>